<template>
	<div>
		msg1:<input type="text" :value="modelValue" @input="msg1Change" />
		<br />
		msg2:<input type="text" :value="msg2" @input="msg2Change" />
		<br />
		msg3:<input type="text" :value="msg3" @input="msg3Change" />
	</div>
</template>

<script setup lang="ts">
import {} from 'vue'

const props = defineProps({
	modelValue: String,
	msg2: String,
	msg3: String,
	// 默认参数修饰符，这里是传入的msg1
	modelModifiers: {
		type: Object,
		default: () => ({}),
	},
	// 自定义修饰符 v-model后面不加: 默认 modelModifiers ；否者是  [:后面参数名]Modifiers
	msg3Modifiers: {
		type: Object,
		default: () => ({}),
	},
})

const emits = defineEmits(['update:modelValue', 'update:msg2', 'update:msg3', 'update:msg3'])
function msg1Change(e: any) {
	const val = e.target.value
	if (props.modelModifiers.toLowerCase) {
		emits('update:modelValue', val.toLowerCase()) // 由于父组件直接写的v-model='msg1',所以此处必须这样写 update:modelValue
	}
}
function msg2Change(e: any) {
	const val = e.target.value
	emits('update:msg2', val)
}
function msg3Change(e: any) {
	const val = e.target.value
	if (props.msg3Modifiers.toUpperCase) {
		emits('update:msg3', val.toUpperCase())
	} else {
		emits('update:msg3', val)
	}
}
</script>

<style lang="sass" scoped></style>
